{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">


                        <div class="col-md-7">
                            <div class="card bor" style="height: calc( 100% - 15px);">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">社群数据</div>
                                    </div>
                                    <div class="u-rig">
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="j"></text>
                                                <text class="str">今日新增</text>
                                            </div>
                                            <div class="bg-str">
                                                {$resource_data.todayResource}
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="bz"></text>
                                                <text class="str">本周新增</text>
                                            </div>
                                            <div class="bg-str">
                                                {$resource_data.countResourceWeek}
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="dy"></text>
                                                <text class="str">当月新增</text>
                                            </div>
                                            <div class="bg-str">
                                                {$resource_data.countResourceMonth}
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="jn"></text>
                                                <text class="str">社群总数</text>
                                            </div>
                                            <div class="bg-str">
                                                {$resource_data.countResource}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="txt-cen">
                                        <canvas id="post" height="80"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-5">
                            <div class="card bor" style="height: calc( 100% - 15px) ;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">审核数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="state1" width="112" height="112"></canvas>
                                        <canvas id="state2" width="112" height="112"></canvas>
                                        <canvas id="state3" width="112" height="112"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div class="d-th">
                                            <div class="numer t">{$check_data.resourcePass}</div>
                                            <div class="d-str">已审核通过</div>
                                            <div class="d-add">占所有社群的{$check_data.resourcePassScale}</div>
                                        </div>
                                        <div class="d-th">
                                            <div class="numer b">{$check_data.resourceReject}</div>
                                            <div class="d-str">驳回社群</div>
                                            <div class="d-add">占所有社群的{$check_data.resourceRejectScale}</div>
                                        </div>
                                        <div class="d-th">
                                            <div class="numer w">{$check_data.resourceCheck}</div>
                                            <div class="d-str">未审核社群</div>
                                            <div class="d-add">占所有社群的{$check_data.resourceCheckScale}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

            <div class="list">
<!--                <div class="uname">社群列表</div>-->
                <div class="app-block">
                    <div class="app-content">
                        <div class="sel-mat-top">
                            <div class="sel-dfx">
                                <div class="sel-bottom add" onclick="add()">✚ 添加社群</div>
                                <div id="list" class="sel-bottom {if input('type',1) == 1}avt{/if}"
                                     onclick="commtype(1,this)">社群列表
                                </div>
                                <!--                                <div id="check" class="sel-bottom {if input('type',1) == 2}avt{/if}"-->
                                <!--                                     onclick="commtype(2,this)">审核列表-->
                                <!--                                </div>-->
                                <div id="remd" class="sel-bottom {if input('type',1) == 3}avt{/if}"
                                     onclick="commtype(3,this)">最新推荐
                                </div>
                                <div id="big" class="sel-bottom {if input('type',1) == 4}avt{/if}"
                                     onclick="commtype(4,this)">优质大群
                                </div>
                                <div id="servi" class="sel-bottom {if input('type',1) == 5}avt{/if}"
                                     onclick="commtype(5,this)">直属服务商
                                </div>
                                <div id="offci" class="sel-bottom {if input('type',1) == 6}avt{/if}"
                                     onclick="commtype(6,this)">官方伙伴
                                </div>
                                <div class="keword">
                                    <input name="keyword" placeholder="名称|企业|城市|行业" class="key-input">
                                    <div class="key-bottom" onclick="keywordList()">搜索</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="switch_state" {{
           d.state== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
    <button data-toggle="dropdown" class="btn btn-sm btn-outline-secondary">操作<i
            class="layui-icon layui-icon-down layui-font-2"></i></button><br>
    <ul class="dropdown-menu">
    </ul>
</script>
<script>
    function recommend(id, type) {
        console.log(id, type);
        layer.confirm('移入到最新推荐?', {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/resource/addRecommend')}", {id: id, type: type}, function (res) {
                // console.log(res)
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    //取消推荐
    function cancelRecommend(id, type) {
        layer.confirm('取消该推荐?', {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/resource/cancelRecommend')}", {id: id, type: type}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    function changeStatus(id, field, text) {
        console.log(field)
        layer.confirm(text + '?', {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/resource/changeStatus')}", {id: id, field: field}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    function changeSort(id, sort, field) {
        layer.prompt({title: '请填写排序值', formType: 3, value: sort}, function (text, index) {
            $.post("{:url('/resource/changeStatus')}", {
                id: id,
                field: field,
                sort: text,
                source: 1
            }, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        })
    }

    function add() {
        window.location.href = '{:url("/resource/resourceAdd")}';
    }

    function edit(id) {
        window.location.href = '{:url("/resource/resourceEdit")}?id=' + id;
    }

    function see(id) {
        window.location.href = '{:url("/resource/resourceShow")}?id=' + id;
    }

    function del(id) {
        layer.confirm('删除该数据?', {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/resource/changeStatus')}", {id: id, source: 2}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    //切换
    function commtype(t, e) {
        $('.sel-bottom').removeClass('avt');
        $(e).addClass('avt');
        type = t;
        keyword = '';
        $('input[name=keyword]').val('');
        //社群列表
        initcommList(type);
        window.history.replaceState(null, null, './index.html?type=' + type);
    }

    // 初始请求
    var url = "{:url('/resource/index')}";
    // var type = "<?php echo input('type',1);?>";
    var uri = window.location.search.split('=')[1];
    console.log(uri);
    var type = uri ? uri : 1;
    console.log(type);
    var keyword = '';
    var layer = '';
    layui.use('layer', function () {
        layer = layui.layer;
    });
    //获取社群列表
    initcommList(type);


    function keywordList() {
        keyword = $('input[name=keyword]').val();
        if (keyword == '') {
            toastr.error('请输入关键词');
            return false;
        }
        initcommList(type, keyword);
    }

    function initcommList(t, k) {
        //类型
        var titles = '创建时间/访问次数';
        if (t == 1) {
            url = "{:url('/resource/index')}";
        } else if (t == 2) {
            url = "{:url('/resource/check')}";
        } else if (t == 3) {
            url = "{:url('/resource/recommend')}";
            titles = '开始/结束/推荐时间';
        } else if (t == 4) {
            url = "{:url('/resource/high')}";
        } else if (t == 5) {
            url = "{:url('/resource/service')}";
        } else if (t == 6) {
            url = "{:url('/resource/partner')}";
        }
        // layui插件
        layui.use('table', function () {
            var table = layui.table
                , form = layui.form;
            // 表格初始化
            table.render({
                elem: '#linkstable'
                , skin: 'line' //行边框风格
                , even: true //开启隔行背景
                , url: url
                , method: 'post'
                , where: {type: t, keywords: k}
                , page: true //开启分页
                , cols: [[
                    {field: 'name_data', title: 'LOGO/名称/行业'}
                    , {field: 'users_data', title: '昵称'}
                    , {field: 'ids', title: '序号/编号'}
                    , {field: 'company_data', title: '二维码/企业/城市'}
                    , {field: 'create_data', title: titles}
                    , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
                ]],
                done: function (res) {
                    var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                    element.css('overflow', 'visible');
                    element.children('.dropdown-menu').css('min-width', 'auto');

                    console.log(res)
                    var html = '';
                    $.each(res.data, function (key, value) {
                        // 社群列表
                        if (res.type == 1) {
                            // 推荐
                            if (!value.is_recommend) {
                                html += '<li class="dropdown-item" onclick="recommend(' + value.id + ',2)">移入最新推荐</li>';
                            }

                            // 优质
                            if (!value.is_high) {
                                html += '<li class="dropdown-item" onclick="changeStatus(' + value.id + ',' + "'is_high'" + ',' + "'移入优质大群'" + ')">移入优质大群</li>';
                            }

                            // 服务商
                            if (!value.is_service) {
                                html += '<li class="dropdown-item" onclick="changeStatus(' + value.id + ',' + "'is_service'" + ',' + "'移入直属服务商'" + ')">移入直属服务商</li>';
                            }

                            // 官方伙伴
                            if (!value.is_partner) {
                                html += '<li class="dropdown-item" onclick="changeStatus(' + value.id + ',' + "'is_partner'" + ',' + "'移入官方伙伴'" + ')">移入官方伙伴</li>';
                            }

                            html += '' +
                                '<li class="dropdown-item" onclick="see(' + value.id + ')">详情</li>\n' +
                                '<li class="dropdown-item" onclick="edit(' + value.id + ')">编辑</li>\n' +
                                '<li class="dropdown-item" onclick="del(' + value.id + ')">删除</li>';

                            // 审核列表
                        } else if (res.type == 2) {
                            console.log(value.status)
                            // 审核中
                            if (value.status == 0) {
                                html += '' +
                                    '<li class="dropdown-item" onclick="reject(' + value.id + ')">驳回</li>' +
                                    '<li class="dropdown-item" onclick="pass(' + value.id + ')">通过</li>' +
                                    '<li class="dropdown-item" onclick="checkEdit(' + value.id + ')">编辑</li>';
                            }
                            // 已驳回
                            if (value.status == -1) {
                                html += '<li class="dropdown-item" style="cursor: default">已驳回：<span style="color:red">' + value.reject_reason + '</span></li>';
                            }

                            // 最新推荐
                        } else if (res.type == 3) {
                            html += '<li class="dropdown-item" onclick="cancelRecommend(' + value.id + ',2)">取消推荐</li>';

                            // 优质大群
                        } else if (res.type == 4) {
                            html += '<li class="dropdown-item" onclick="changeStatus(' + value.id + ',' + "'is_high'" + ',' + "'移出优质大群'" + ')">移出优质大群</li>';

                            // 直属服务商
                        } else if (res.type == 5) {
                            html += '<li class="dropdown-item" onclick="changeSort(' + value.id + ',' + value.sort + ',' + "'sort'" + ')">排序</li>' +
                                '<li class="dropdown-item" onclick="changeStatus(' + value.id + ',' + "'is_service'" + ',' + "'移出直属服务商'" + ')">移出直属服务商</li>';

                            // 官方伙伴
                        } else if (res.type == 6) {
                            html += '<li class="dropdown-item" onclick="changeSort(' + value.id + ',' + value.sort1 + ',' + "'sort1'" + ')">排序</li>' +
                                '<li class="dropdown-item" onclick="changeStatus(' + value.id + ',' + "'is_partner'" + ',' + "'移出官方伙伴'" + ')">移出官方伙伴</li>';

                        }

                        // 非社群列表时，操作栏 默认展开
                        if (res.type != 1) {
                            // $('.layui-table-cell .dropdown-menu').addClass('show');
                        }

                        // 节点渲染
                        $($('.layui-table-cell .dropdown-menu')[key]).html(html);

                        // 重置
                        html = '';
                    });
                },

                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.list,
                        "type": res.data.type
                    };
                }
            });
        });
    }


    // 社群数据
    let labels = "{$resource_data.resourceMonthLine.labels}";
    let datas = "{$resource_data.resourceMonthLine.datas}";
    let dataDay = labels.split(',');
    let dataValue = datas.split(',');
    var ctx = document.getElementById("post");
    var data = {
        labels: dataDay,
        datasets: [
            {
                label: '',
                backgroundColor: '#F2FBFF',
                borderColor: "#5B78FF", //路径颜色
                pointBackgroundColor: "#5B78FF", //数据点颜色
                pointBorderColor: "#fff", //数据点边框颜色
                data: dataValue,
                borderWidth: '2',
                pointRadius: 0
            },
        ],
    };
    new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            legend: {display: false},
            scales: {
                yAxes: [{
                    tension: 0,
                    max: 50,
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }],
                xAxes: [
                    {
                        gridLines: {display: false}
                    }
                ]
            }
        }
    });

    // 审核数据
    // 已通过
    var chartDom = document.getElementById('state1');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: "{$check_data.resourcePassScale}",
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourcePass}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#5B78FF'},
                                    {offset: 0.5, color: '#4A39ED'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastPass}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);

    // 驳回
    var chartDom = document.getElementById('state2');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: "{$check_data.resourceRejectScale}",
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果

            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourceReject}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#FF4438'},
                                    {offset: 0.5, color: '#FFA13B'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastReject}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);

    // 未审核
    var chartDom = document.getElementById('state3');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: "{$check_data.resourceCheckScale}",
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果

            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourceCheck}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#322FFD'},
                                    {offset: 0.5, color: '#00C7FF'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastCheck}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);
</script>
<style>
    .container{
		/* height: calc(100vh - 70px); */
	}
	.list{
		/* height: calc(100vh - 70px); */
	}
    .add {
        background: #3F6EFF !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #FFF !important;
    }

    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

    .sel-mat-top {
        /*margin-top: 40px;*/
        /*margin-bottom: 40px;*/
    }

    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }

    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sel-bottom:active {
        background: #3377FF;
    }

    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;

    }

    .bg-txt {
        display: flex;
        margin-top: 5px;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .txt-cen {
        text-align: center;
    }

    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }

    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }

    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .d-th {
        padding-left: 10px;
        text-align: center;
    }

    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }

    .t {
        color: #576AFB;
    }

    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }

    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }

    .b {
        color: #FF6739;
    }

    .w {
        color: #00A0FF;
    }

    .keword {
        display: flex;
    }

    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }

    .key-bottom {
        margin-left: 10px;
        background: #3F6EFF;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
		display: flex;
        cursor: pointer
    }

    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>
</html>
